<!--
 * @Author: 郝奔 1425466221@qq.com
 * @Date: 2024-11-22 09:21:08
 * @LastEditors: 郝奔 1425466221@qq.com
 * @LastEditTime: 2024-12-26 13:48:47
 * @FilePath: /HG-dqbasic_open_platform/src/framework/components/base-comps/dt-select-icon/index.vue
 * @Description: 
 * Copyright (c) 2024-present HBIS Digital Technology Co.,Ltd. All rights reserved. 
-->
<script lang="ts" setup>
import SvgIcon from '@/framework/components/SvgIcon/index.vue';
import { imgpath } from '@/framework/utils/auth';

const icons = [] as string[];
const modules = import.meta.glob('@/assets/uploadSvg/*.svg');
for (const path in modules) {
    const p = path.split('assets/uploadSvg/')[1].split('.svg')[0];
    icons.push(p);
}
defineExpose({
    clear
})
const props = defineProps({
    fileSize: {
        type: Number,
        default: 5
    },
    // 文件类型, 例如["doc", "xls", "ppt", "txt", "pdf"]
    fileType: {
        type: Array,
        default: () => ['png', 'jpg', 'jpeg']
    },
    iconType: {
        type: Number,
        default: 2  //1图片 2icon
    },
    fileId: {
        type: String,
        default: ''
    },
    modelValue: {
        type: String,
        default: ''
    },
    iconColor: {
        type: String,
        default: 'linear-gradient(180deg, #FFCD87 0%, #CC5729 100%)'
    }
})
const state = reactive({
    hoverShow: false,
    activeIcon: '',
    uploadImg: '',
    visible: false,
    active: '1',
    colorList: ['linear-gradient(180deg, #FFCD87 0%, #CC5729 100%)', 'linear-gradient(180deg, #B8E24B 0%, #129A37 100%)',
        'linear-gradient(180deg, #7DC1FC 0%, #1D4DD2 100%)', 'linear-gradient(180deg, #90E9E1 0%, #11838B 100%)',
        'linear-gradient(180deg, #F98D86 0%, #A1161F 100%)', 'linear-gradient(180deg, #C59AED 0%, #5A25B0 100%)',
        'linear-gradient(180deg, #3FB5FF 0%, #1D4DD2 100%)'],
    fileUrl: ''
})
const isSelfIcon = computed(() => {
    return !icons.includes(props.modelValue) //true=》图片 false=》图标
})
const imgValuePan = computed(() => {
    return state.uploadImg == '' && !icons.includes(props.modelValue)
})
const imgNull = computed(() => {
    return state.uploadImg != '' //true=》上传图片 false=》未上传(state.upload =='')
})
const fileUrlShow = computed(() => {
    return imgpath(props.modelValue)
})
const emits = defineEmits(['update:modelValue', 'update:iconColor', 'update:iconType', 'el-form-item-change'])
function showPop(): void {
    if (!props.iconColor) {
        handleIcon(state.colorList[0])
    }
    // 点击编辑，如果是图片，需要给uploadImg赋值
    if (isSelfIcon.value && !icons.includes(props.modelValue) && state.uploadImg == '') {
        state.uploadImg = props.modelValue
    }
}
function getImage(value: string): void {
    state.uploadImg = value
    handleInput(value)
}
function clear(): void {
    state.activeIcon = ''
    state.uploadImg = ''
    state.active = '1'
}
function handleInput(newVal: string): void {
    emits('update:modelValue', newVal)
    emits('el-form-item-change', newVal)
}
function handleIcon(newVal: string): void {
    emits('update:iconColor', newVal)
}
// 移入
function mouseOver(): void {
    state.hoverShow = true
}
function mouseLeave(): void {
    state.hoverShow = false
}
function tabClick(value: string): void {
    const UPDATEICONTYPE = 'update:iconType'
    state.active = value
    if (value === '1') {
        emits(UPDATEICONTYPE, 2)
        handleInput(state.activeIcon || props.modelValue)
    } else {
        emits(UPDATEICONTYPE, 1)
        handleInput(state.uploadImg != '' ? state.uploadImg : props.modelValue)
    }
}
function iconClick(item: string): void {
    state.activeIcon = item
    handleInput(item)
}
function transformFileUrl(file: { url: string }[]): void {
    state.fileUrl = file[0].url
}
</script>
<template>
    <div>
        <el-popover v-model="state.visible" trigger="click" popper-class="uploadIcon-pop" placement="top"
            @show="showPop">
            <div class="pop-content">
                <div class="cont-head">
                    <span :class="{ active: state.active === '1' }" @click="tabClick('1')">系统图标</span>
                    <span :class="{ active: state.active === '2' }" @click="tabClick('2')">自定义图标</span>
                </div>
                <div>
                    <!-- 图标 -->
                    <div v-if="state.active === '1'" class="cont-body">
                        <div class="color-con">
                            <span v-for="item in state.colorList" :key="item" :style="{ background: item }"
                                :class="{ activeColor: item === props.iconColor }" class="color-block"
                                @click="handleIcon(item)" />
                        </div>
                        <div class="icon-con">
                            <div v-for="item in icons" :key="item"
                                :class="{ activeIcon: item === state.activeIcon || item === props.modelValue }"
                                class="icon-block" :style="{ background: props.iconColor }" @click="iconClick(item)">
                                <svg-icon :icon-class="item" class-name="icon-bg" />
                            </div>
                        </div>
                    </div>
                    <!-- 自定义 -->
                    <div v-if="state.active === '2'" class="img-body">
                        <DtUpload :modelValue="imgValuePan ? props.modelValue : state.uploadImg"
                            :fileSize="props.fileSize" :fileType="props.fileType" :recommendation="'建议尺寸200*200像素'"
                            :listType="!imgNull ? 'text' : 'picture-card'" @update:modelValue="getImage" :fileLimit="1"
                            @transformFileUrl="transformFileUrl">
                        </DtUpload>
                    </div>
                </div>
            </div>
            <template #reference>
                <div style="display: inline-block;">
                    <el-button v-if="props.modelValue == ''" size="small">选择图标</el-button>
                    <div v-else class="reference-block" :style="{ background: isSelfIcon ? '' : props.iconColor }"
                        @mouseover="mouseOver" @mouseleave="mouseLeave">
                        <svg-icon v-if="!isSelfIcon" :icon-class="props.modelValue" class-name="icon-bg" />
                        <el-image v-else class="img" :src="state.fileUrl || fileUrlShow" />
                        <div v-show="state.hoverShow" class="hover-mask">
                            <i class="el-icon-edit-outline" />
                        </div>
                    </div>
                </div>
            </template>
        </el-popover>
    </div>
</template>
<style lang="scss" scoped>
$width: 320px;
$color: #3461ff;
$borderColor: #c2d0ff;

::-webkit-scrollbar {
    width: 4px;
}

.reference-block {
    position: relative;
    display: block;
    width: 48px;
    height: 48px;
    line-height: 56px;
    text-align: center;
    border-radius: 14px;

    .img {
        width: 100%;
        height: 100%;
        border-radius: 14px;
    }

    .icon-bg {
        font-size: 32px;
    }

    .hover-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        color: #fff;
        font-size: 20px;
        line-height: 48px;
        text-align: center;
        background: #080e12;
        border-radius: 11px;
        cursor: pointer;
        opacity: 0.5;
    }
}

.pop-content {
    width: $width;

    .cont-head {
        display: flex;
        height: 40px;
        color: #131414;
        font-size: 14px;
        line-height: 40px;
        text-align: center;

        span {
            flex: 1;
            border-bottom: 1px solid #e4e7ed;
            cursor: pointer;
        }

        span.active {
            color: $color;
            border-color: $color;
            border-bottom: 2px solid #3461ff;
        }
    }

    .cont-body {
        padding-bottom: 18px;

        .color-con {
            display: flex;
            padding: 16px 0 16px 18px;

            .color-block {
                width: 32px;
                height: 32px;
                margin-right: 10px;
                border-radius: 50%;
                cursor: pointer;
            }

            .color-block.activeColor {
                border: 2px solid $borderColor;
            }
        }

        .icon-con {
            display: flex;
            flex-wrap: wrap;
            height: 260px;
            margin: 0 12px;
            padding: 3px 0 10px 12px;
            overflow: hidden;
            overflow: hidden auto;
            background: #ebeef5;
            border-radius: 8px;

            .icon-block {
                width: 48px;
                height: 48px;
                margin: 7px 7px 0 0;
                line-height: 56px;
                text-align: center;
                border-radius: 14px;
                cursor: pointer;

                .icon-bg {
                    font-size: 32px;
                }
            }

            .icon-block.activeIcon {
                border: 2px solid $borderColor;
            }
        }
    }

    .img-body {
        height: 340px;

        .up-slot {
            img {
                width: 76px;
                height: 51px;
                margin: 60px 0 8px;
            }

            width: $width;
            color: #909399;
            font-size: 13px;
            line-height: 24px;
            text-align: center;
        }

    }
}

:deep(.img-body) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 322px;
}

.img-body :deep(.el-upload-list__item-actions .el-upload-list__item-preview) {
    display: none;
}

.img-body :deep(.el-upload-list__item-delete) {
    margin-left: 0;
}

:deep(.svg-icon) {
    font-size: 32px;
    vertical-align: -0.15em;
}
</style>

<style lang="scss">
.uploadIcon-pop.el-popover {
    max-width: 520px !important;
    max-height: 500px !important;
    padding: 0 !important;
    width: 320px !important;
    overflow: hidden;
}
</style>